<template style="top: 0; left: 0; height: 100%;">
    <div class="types">
        <div class="types-page">
            <div class="left" >
                <div  v-for="it in typesList" 
                :class="['item', it.active ? 'active' : '']"
                @click="typeChange(it)"
                :key="it.name">{{it.name}} </div>
            </div>
            <div class="right" @scroll="scrollEvt">
                <div  class="right_1" v-for="lit in oneList" :key="lit.name">
                    <div class="right_11" @click="bigBox(lit.id)">
                        <img :src="lit.image" alt="">
                    </div>
                    
                    <div style="flex: 1;" class="right_12">
                        <p class="p1">&nbsp;&nbsp;{{lit.name}}</p>
                        <p class="p2">上架时间：<span>{{lit.times}}</span></p>
                        <p class="p3">优惠券：<span>{{lit.couponValue}}</span></p>
                        <p class="p4">
                            <span class="p5">￥</span>
                            {{lit.price}} 
                            <span class="p6">元</span> 
                            <span class="p7">原价:{{lit.tbOriginPrice}}元</span>
                        </p>
                        <button @click="adData(lit)">加入购物车</button>
                    </div>
                </div>
                <!-- <div class="items" v-for="lit in oneList" :key="lit.name">
                    <img :src="lit.image" alt="">
                    <div>{{ lit.name }}</div>
                    <span><em>￥</em>{{lit.price}}</span>
                    <button @click="adData(lit)" class="vanBut">加入购物车</button>
                    <button class="vanBut1">查看购物车</button>
                </div>-->
                <button class="butEvt" @click="add()">加载更多......</button> 
            </div>
        </div>
        <subscript/>
    </div>
</template>

<script>
    import axios from 'axios'
    import subscript from '../assembly/subscript.vue'
    // import {classifyApi} from '../../apis/classifyApi'

    export default {
    components: { subscript },
        data(){
            return{
                typesList:[
                    {name: '全部',   active: true,},
                    {name:'新装上市',active:false},
                    {name:'袜子专区',active:false},
                    {name:'美妆洗护',active:false},
                    {name:'家具生活',active:false},
                    {name:'精品女装',active:false},
                    {name:'魅力男装',active:false},
                    {name:'母婴童装',active:false},
                    {name:'箱包配饰',active:false},
                    {name:'饮料食品',active:false},
                    {name:'品牌展示',active:false},
                ],
                oneList:[],
                asMore: true,
                loading:true,
                hasMore: true,
                starts:0,
                oneStarts:20
            }
            
        },

        created(){
            // debugger;
            axios.get('http://www.xiongmaoyouxuan.com/api/tab/1/feeds?start=80&sort=0',{}).then(({data})=>{
                console.log(data);
                if(data.code === 200){
                    let tem = data.data.list.map(it=>{
                        return {name:it.title, image:it.image, id:it.id, price:it.price, times:it.expireDate,couponValue:it.couponValue, expireMsg:it.expireMsg, tbOriginPrice:it.tbOriginPrice}
                    })
                    this.oneList = tem
                    // debugger;
                    axios.get('http://www.xiongmaoyouxuan.com/api/tab/1/feeds?start=80&sort=0',{}).then(({data})=>{
                        console.log(data);
                        if(data.code === 200){
                            // debugger;
                            let temp = data.data.list.map(it=>{
                            return {name:it.title, image:it.image, id:it.id, price:it.price, times:it.expireDate,couponValue:it.couponValue, expireMsg:it.expireMsg, tbOriginPrice:it.tbOriginPrice}
                            })
                            this.oneList=temp
                        }
                    })
                }
            })
            

        },

        methods:{
            add(){
                this.starts = this.starts+60
                // console.log('页数',this.starts);
                axios.get('http://www.xiongmaoyouxuan.com/api/tab/1/feeds?start='+this.starts+'&sort=0',{

                }).then(data=>{
                let twoList = data.data.data.list.map(it=>{
                    return{name:it.title, image:it.image, id:it.id, price:it.price, }
                })
                this.oneList.push(...twoList)
                console.log(twoList);
                })
            },
            typeChange(it){
                this.typesList = this.typesList.map(i =>{
                    i.active = i.name === it.name
                    return i
                    })
                


                this.oneList = []
                 // 开启节流标识
                this.loading = true
                // this.getList()
            },

            scrollEvt(evt) {          
                // console.log(evt);     
                let isBot = evt.target.scrollHeight < (evt.target.offsetHeight + evt.target.scrollTop + 20)              
                if (isBot && this.hasMore && !this.loading) {
                    // console.log('>>>>>>>>>>>');

                }
            },
            
            adData(lit){
                 this.$store.commit('welfareah/setgoods',lit)

                // let aaa =[...(this.$store.getters["welfareah/getdoods"])]
                // // console.log("????????",aaa);
                // let index = aaa.findIndex(item=>item.id === lit.id)
                // console.log('拿到数据了',index);

                // aaa.splice(index,1)
                
                // let bbb = aaa.map(item=>{
                //     if(item.id === lit.id){ 
                //         return item.id
                //     }
                // })
                // this.$store.commit('welfareah/setgoods',aaa)
                console.log(lit);
                

               
            },

            bigBox(it){

                this.$router.push({path:'/details',query:{id:it}})
            },

            async getList() {
                setTimeout(() => {
                    this.loading = false
                });
            }
        }
        
    }
</script>

<style lang="less" scoped>
    @import "../../style/common.less";

    .types{
        height: 100%;
        width: 100%;
         position: fixed;
         display: flex;
    }
     .types-page {
        display: flex;
        flex:1;
        height: 100%;
        overflow-y: auto;
        .left {
            flex: 0 0 100px;
            background-color: #f6f7fb;
            overflow-x: hidden;
            // overflow-x: scroll;
            > .item {
                position: relative;
                line-height: 70px;
                font-size: .8rem;
                color: #6d798f;
                text-indent: 16px;
                cursor: pointer;
                user-select: none;
                &::after {
                    display: block;
                    position: absolute;
                    top: 50%;
                    right: -4px;
                    margin-top: -8px;
                    width: 0;
                    height: 0;
                    border: solid 8px transparent;
                    border-left-color: #e40114;
                }
                &.active {
                    background-color: #fff;
                    color: #e40114;
                    &::after {
                        content: '';
                    }
                }
            }
        }
        .right {
            flex: 1;
            padding: 0 10px;
            // background-color: rgb(168, 241, 238);
            overflow-y: scroll;
            width: 100%;
            // overflow-y: hidden;
            .right_1{
                display: flex;
                width: 100%;
                height: 260px;
                margin-top: 10px;
                // background: #e9f0f7;
                border-bottom: 2px solid #d6dfee;              
                .right_11{
                    height: 8rem;
                    width: 50%;
                    margin-top: 30px;
                    img{
                        width: 100%;
                        height: 10rem;

                    }
                }
                .right_12{
                    // display: flex;
                    height: 11rem;
                    margin-top: 30px;
                    // background: #e40114;
                    .p1{
                        // display: flex;
                        // width: 260px;
                        font-size: 10px;
                        // white-space: nowrap;
                        // overflow: hidden;
                        // text-overflow: ellipsis;
                        margin-left: 5px;
                        font-weight: bold;
                        margin-top: 1px;
                    }
                    .p2{
                        margin-top: 5px;
                        margin-left: 5px;
                        font-size: 12px;
                        span{
                            color: rgb(231, 54, 54);
                            font-size: 10px;
                        }
                    }
                    .p3{
                        margin-top: 5px;
                        margin-left: 5px;
                        font-size: 12px;
                        span{
                            color: rgb(231, 54, 54);
                            font-size: 15px;
                        }
                    }
                    .p4{
                        color: #e40114;
                        margin-left: 5px;
                        margin-top: 10px;
                        font-size: 18px;
                        .p5{
                            font-size: 15px;
                            color: #0c0c0c;
                        }
                        .p6{
                            color: #0c0c0c;
                            font-size: 15px;
                        }
                        .p7{
                            color: #6d798f;
                            font-size: 1px;
                            text-decoration: line-through;
                        }
                    }
                    button{
                        // position: absolute;
                        // top: 180px;
                        // left: 120px;
                        margin-left: 25px;
                        background: #eb636f;
                        border: 0px;
                        border-radius: 12px;
                        font-size: 15px;
                    }
                }
            }

             >.butEvt{
                display: block;
                width: 100%;
                height: 50px;
                background: #e9f0f7;
                border-radius: 30px;
                margin-top: 20px;
            }


            // > .items {
            //     margin-bottom: 12px;
            //     border-bottom: solid 1px #eaeaea;
            //     height: 220px;
            //     width: 100%;
            //     position: relative;
            //     &:last-child {
            //         border-bottom: none;
            //     }
            //     img {
            //         display: block;
            //         width: 200px;
            //         height: 200px;
            //         float: left;
            //     }
            //     h4{
            //         display: block;
            //         float: right;
            //         width: 251px;
            //         white-space: nowrap;
            //         overflow: hidden;
            //         text-overflow: ellipsis;
            //         position: absolute;
            //         top: -20px;
            //         left: 210px;
            //         font-size: 18px;
            //     }
            //     span{
            //         display: block;
            //         position: absolute;
            //         top: 50px;
            //         left: 250px;
            //         font-size: 18px;
            //         color: red;
            //         font-size: 28px;
            //         >em{
            //             color: black;
            //             font-size: 50px;
            //         }
            //     }
            //     .vanBut{
            //         display: block;
            //         position: absolute;
            //         top: 170px;
            //         left: 215px;
            //         width: 115px;
            //         height: 40px;
            //         background: rgb(238, 86, 86);
            //         border: 0px;
            //         border-radius: 15px;
            //     }
            //     .vanBut1{
            //         display: block;
            //         position: absolute;
            //         top: 170px;
            //         left: 340px;
            //         width: 115px;
            //         height: 40px;
            //         background: rgb(238, 86, 86);
            //         border: 0px;
            //         border-radius: 15px;
            //     }
            // }
           
        }
    }
</style>